<template>
  <div class="cc_asset">
    <div class="main-container">
      <div class="gc_main">
        <div class="g_container cc_main">
          <!-- 标题栏 -->
          <div class="cc_title flex">
            <h2>法币资产</h2>
            <div class="top_right">
              <p> <span>总资产折合</span>：{{Assinfos.usdt}} USDT≈ {{Assinfos.cny}} CNY <span>|</span> </p>
            </div>
          </div>
          <!-- 内容 -->
          <div class="assets-container">
            <div class="ass_cont assets-detail-wrapper">
              <div class="border-wrapper fill" v-for="(item,index) in AssList" :key="index">
                <div class="assets-item flex-between">
                  <div class="currency">
                    <div>
                      <img :src="item.logo" alt="" srcset="">
                    </div>
                    <p class="name">{{item.coin}}</p>
                  </div>
                  <div class="account-detail">
                    <p class="account-title">法币账户</p>
                    <div class="assets-list" style>
                      <div>
                        <span class="font-gray">可用：</span>{{item.usable}} {{item.coin}}
                      </div>
                      <div>
                        <span class="font-gray">冻结：</span>{{item.disable}} {{item.coin}}
                      </div>
                    </div>
                  </div>
                  <div class="control">
                    <div class="btn-wrapper">
                      <div class="otc-btn-sytle" @click="showDialog(0,item)">
                        <el-button size="small" type="primary" style="width:80px;">充值</el-button>
                      </div>
                    </div>
                    <div class="btn-wrapper last-btn-wrapper">
                      <div class="otc-btn-sytle" @click="showTBProp(item)">
                        <el-button size="small" type="primary"  >划转提现</el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 充币弹窗 -->
    <charge-box
      :showCharge='showChargeDialog'
      @closeModel='dialogClose(1)'
      :coin='coinInfo.name'
      :tag='mytag'
      :chargeAddress='chargeAddress'
    >
    </charge-box>
    <!-- 资产互转 -->
    <el-dialog
      title="资产互转"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <span>提币请划转至币币交易账户</span>
      <div class="tb_form">
        <el-form :model="formData">
          <el-form-item label="从">
            <el-col :span="8">
              <el-select v-model="formData.region" placeholder="请选择资产类型" size="mini">
                <el-option label="法币账户" value="1" ></el-option>
                <el-option label="币币账户" value="2"></el-option>
              </el-select>
            </el-col>
            <el-col class="line exch_icon" :span="3">
               <i class="iconfont icon-yqfqiehuan"></i>
            </el-col>
            <el-col :span="8">
              <el-select v-model="formData.region" placeholder="请选择资产类型" size="mini">
                <el-option label="币币账户" value="1" ></el-option>
                <el-option label="法币账户" value="2"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
        <div class="coin_name coin_ban">
          <p>币种：{{TbiCoin}}</p> 
          <p>币币账户余额：{{Coinbance.userusable}} {{TbiCoin}}</p>
          <p>法币账户余额：{{Coinbance.otherusable}} {{TbiCoin}}</p>
        </div>
        <el-form :model="formData" size="mini">
          <el-form-item label="数量">
            <el-input v-model="formData.number" type="number"></el-input>
          </el-form-item>
          <el-form-item label="交易密码">
            <el-input v-model="formData.tradpassword" type="password"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="c2ccointradBtn()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import chargeBox from "@/components/dialogContent/chargeBox";
import { checkTradePassword } from "../../service/TradeService.js";
export default {
  components: { chargeBox },
  data() {
    return {
      Assinfos:{},
      AssList:[],
      // 充币地址
      showChargeDialog: false,
      showWidthDrawDialog: false,
      chargeAddress: "",
      // 充币二维码
      qrCode: null,
      coinInfo: {},
      getCodeTimes: 0,
      mytag: "",
      dialogVisible: false,
      PopData: "",
      TbiCoin: "",
      formData:{
        region:'1',
        type:'',
        number:'',
        coin:'',
        tradpassword:'',
      },
      Coinbance:{},
    };
  },
  computed: {},
  watch: {},
  mounted() {
    // this.getc2csumcoin();
    this.getc2ccoinlist();
  },
  methods: {
    // 获取法币资产账户折合
    getc2csumcoin() {
      this.request(this.api.c2cassetsamount).then(res => {
        if (res && res.code != "0") {
          this.getDataFaild(res.msg || "获取数据失败");
          return false;
        }
        this.Assinfos = res.data[0];
      });
    },
    // 获取法币账户资产列表
    getc2ccoinlist() {
      return this.request(this.api.c2cassets).then(res => {
        if (res.code == "0") {
          this.AssList = res.data.c2c_assets;
          this.Assinfos = res.data.c2c_assets_amount[0];
        } else {
          this.errMsg(res.msg);
          return;
        }
      });
    },
    showDialog(i, data) {
      let blockname = data.blockname;
      let coin =data.name;
      this.coinInfo = data;
      // this.getState();
      switch (i) {
        case 0:
          this.getAddress(blockname);
          break;
        case 1:
          this.getMyAddressList(coin);
          this.getDayNumber(coin);
          this.showWidthDrawDialog=true;
          break;
        case 2:
          this.showTransferDialog = true;
          break;
      }
    },
    // 关闭弹窗
    dialogClose(i) {
      this.veriType = this.defaultType;
      switch (i) {
        case 1:
          this.showChargeDialog = false;
          break;
        case 0:
          this.showWidthDrawDialog = false;
          this.initData();
          break;
        case 2:
          this.showTransferDialog = false;
          this.initData();
          break;
      }
    },
    getAddress(coin) {
      this.request(this.api.getaddress, { blockchain: coin, showLoading: true }).then(
        res => {
          if (res.code == "0") {
            console.log(res);
            this.showChargeDialog = true;
            try {
              this.chargeAddress = res.data[0].address;
              this.mytag = res.data[0].tag;
            } catch (error) {
              console.log(error);
            }
          } else {
            this.errMsg(res.msg);
          }
        }
      );
    },
    // 提币地址
    getMyAddressList(coin) {
      this.request(this.api.gettoaddress, {
        pagesize:'30',pagecode:'1',
        search: coin
      }).then(res => {
        if (res.code == "0") {
          this.usdtAddr = res.data;
        } else {
          this.errMsg(res.msg);
        }
      });
    },
    // 资金划转
    showTBProp(item){
      console.log(item);
      this.formData.number="";
      this.formData.tradpassword="";
      this.dialogVisible=true;
      this.PopData=item;
      this.TbiCoin=item.coin;
      this.formData.coin=item.coin;
      return this.getbalance();
    },
    // 法币划转时获取法币账户，币币账户资产余额
    getbalance(){
      return this.request(this.api.c2ctranferbalance,{coin:this.TbiCoin} ).then(res => {
        if (res.code=='0') {
          this.Coinbance=res.data[0];
        } else {
          // this.errMsg(res.msg);
          return;
        }
      });
    },
    // 资金划转
    c2ccointradBtn() {
      if(this.formData.region==1){
        this.formData.type='out'
      }else if(this.formData.region==2){
        this.formData.type='in'
      }
      if(this.formData.number==''){
        this.errMsg('请输入数量');
        return;
      }
      if(this.formData.tradpassword==''){
        this.errMsg('请输入交易密码');
        return;
      }
      return this.request(this.api.c2ctranfer, this.formData).then(res => {
        if (res.code == "0") {
          this.dialogVisible = false;
          this.successMsg(res.msg || "成功");
          // 刷新资产
          this.getc2csumcoin();
          this.getc2ccoinlist();
        } else {
          this.errMsg(res.msg);
          return;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.cc_asset {
  min-height: 800px;
  .cc_title {
    justify-content: space-between;
    align-items: flex-end;
    h2 {
      font-size: 30px;
    }
    .top_right{
      p{font-size: 16px;}
      span{color: #9aa5b5;}
    }
  }
  .assets-container {
    .assets-detail-wrapper {
      width: 100%;
      box-shadow: 0 0 20px 0 rgba(28, 36, 44, 0.12);
      border-radius: 8px;
      margin: 20px 0;
    }
    .border-wrapper {
      width: 1076px;
      border-bottom: 1px solid #e6ecf2;
      margin: 0 auto;
    }
    .assets-item:last-child {
        border-bottom-style: none;
    }
    .assets-item {
      width: 100%;
      padding: 32px 24px 32px 0;
      .account-detail {
          color: #1c242c;
          width: 300px;
      }
      img{width: 40px;height:40px;background: #9aa5b5;border-radius: 50%;}
      .currency {
          align-self: baseline;
          width: 38px;
        .name {font-weight: 400;text-align: center;padding-top:5px;}
      }
      .account-title {
          font-size: 16px;
          font-weight: 400;
      }
      .assets-list {
          padding-top: 16px;
        span{color: #9aa5b5;line-height: 18px;}  
      }
      // 
      .control {
          width: 200px;
          align-self: self-end;
          text-align: end;
      }
      .btn-wrapper {
            padding-bottom: 16px;
      }
      .otc-btn-sytle {
            display: inline-block;
        }
    } 

  }
}
.flex-between, .flex-between-center {
    display: flex;
    justify-content: space-between;
}
// 提币划转
.tb_form{
  margin-top: 30px;
  .coin_name{padding: 15px 0;}
  .coin_ban{
    p{line-height: 30px;}
  }
  .exch_icon{
    text-align: center;
    i{font-size: 30px;color: #1296db;}
  }
}
</style>
